import uniqueId from '@form-create/utils/lib/unique';
import { localeProps, makeOptionsRule, makeRequiredRule } from '../../utils/index';
import config from '@/config';
import tool from '@/utils/tool';

const label = '子数据';
const name = 'jd-subdata';

export default {
    icon: 'icon-subdata',
    label,
    name,
    rule({ t }) {
        const opt = t('props.option');
        return {
            type: 'Jd-FormTable',
            field: 'ZSJ',
            title: '子数据',
            info: '',
            effect: {
                fetch: ''
            },
            $required: false,
            validate: false,
            style: { width: '100%' },
            props: {
                addTemplate: {},
                modelId: '',
                formTableAddTemplate: []
            },
            children: []
        };
    },
    watch: {
        modelId: function (val) {
            // console.log('val222', val);
            // if (val.value == 'button'){
            //     val.api.rule[3].hidden = false;
            // } else {
            //     val.api.rule[3].hidden = true;
            // }
        }
    },
    props(_, { t }) {
        return localeProps(t, name + '.props', [
            { type: 'input', field: 'placeholder', title: '占位文本' },
            makeRequiredRule(),
            {
                type: 'col',
                props: { span: 24 },
                children: [
                    {
                        type: 'select',
                        field: 'modelId',
                        title: '选择模型',
                        value: '',
                        style: { width: '255px' },
                        options: [],
                        props: { clearable: true },
                        effect: {
                            fetch: {
                                action: config.API_URL + '/system/model/list?pageNum=1&pageSize=100&_=' + new Date().getTime(),
                                method: 'GET',
                                dataType: 'json',
                                headers: { Authorization: config.TOKEN_PREFIX + tool.cookie.get('TOKEN') },
                                parse(res) {
                                    return res.data.rows.map((row) => {
                                        return {
                                            label: row.tableComment,
                                            value: row.id,
                                            field: row.tableFields
                                        };
                                    });
                                }
                            }
                        },
                        control: [
                            {
                                handle: (val, self) => {
                                    // console.log(val, self, 'self');
                                    var fieldElement = self.rule[2].children[0].control[0].rule[0].props.rule[0].children[0].children[0];
                                    // 清空选择
                                    fieldElement.value = '';
                                    // fieldElement.effect.fetch.action = config.API_URL + '/system/model/columns?id=' + val + '&_=' + new Date().getTime();
                                    return val != '';
                                },
                                rule: [
                                    {
                                        type: 'group',
                                        field: 'formTableAddTemplate',
                                        // field: 'formCreateChild',
                                        title: '字段列表',
                                        // value: [{ fields: '', comment: '' }],
                                        value: [],
                                        props: {
                                            defaultValue: null,
                                            rule: [
                                                {
                                                    type: 'row',
                                                    props: { gutter: 15 },
                                                    children: [
                                                        {
                                                            type: 'col',
                                                            props: { span: 20 },
                                                            children: [
                                                                {
                                                                    type: 'select',
                                                                    field: 'tableColumn',
                                                                    title: '',
                                                                    value: { prop: '', label: '' },
                                                                    props: {
                                                                        valueKey: 'props.prop'
                                                                    },
                                                                    style: { width: '100%', clearable: true },
                                                                    effect: {
                                                                        fetch: {
                                                                            action: config.API_URL + '/system/model/columns?id=25&_=' + new Date().getTime(),
                                                                            method: 'GET',
                                                                            dataType: 'json',
                                                                            headers: { Authorization: config.TOKEN_PREFIX + tool.cookie.get('TOKEN') },
                                                                            parse(res) {
                                                                                return res.data.rows.map((row) => {
                                                                                    return {
                                                                                        label: row.comment,
                                                                                        // value: { prop: row.field, label: row.comment }
                                                                                        // value: row.field
                                                                                        value: {
                                                                                            type: 'jd-form-table-column',
                                                                                            props: {
                                                                                                label: row.comment,
                                                                                                prop: row.field
                                                                                            }
                                                                                            // children: [
                                                                                            //     {
                                                                                            //         type: 'radio'
                                                                                            //         // field: 'DHWB',
                                                                                            //         // info: '',
                                                                                            //         // $required: false,
                                                                                            //         // validate: false,
                                                                                            //         // props: {
                                                                                            //         //     clearable: true
                                                                                            //         // }
                                                                                            //     }
                                                                                            // ]
                                                                                        }
                                                                                    };
                                                                                });
                                                                            }
                                                                        }
                                                                    }
                                                                }
                                                                // {
                                                                //     type: 'select',
                                                                //     field: 'tableComponent',
                                                                //     title: '字段组件',
                                                                //     value: {},
                                                                //     props: {
                                                                //         valueKey: 'label'
                                                                //     },
                                                                //     style: { width: '100%', clearable: true },
                                                                //     options: [...componentSelectList]
                                                                //     // effect: {
                                                                //     //     fetch: {
                                                                //     //         action: config.API_URL + '/system/model/columns?id=25&_=' + new Date().getTime(),
                                                                //     //         method: 'GET',
                                                                //     //         dataType: 'json',
                                                                //     //         headers: { Authorization: config.TOKEN_PREFIX + tool.cookie.get('TOKEN') },
                                                                //     //         parse(res) {
                                                                //     //             return res.data.rows.map((row) => {
                                                                //     //                 return {
                                                                //     //                     label: row.comment,
                                                                //     //                     // value: { prop: row.field, label: row.comment }
                                                                //     //                     value: {
                                                                //     //                         type: 'el-table-column',
                                                                //     //                         props: {
                                                                //     //                             label: row.comment,
                                                                //     //                             prop: row.field
                                                                //     //                         },
                                                                //     //                         children: {
                                                                //     //                             type: 'input',
                                                                //     //                             field: 'DHWB',
                                                                //     //                             info: '',
                                                                //     //                             $required: false,
                                                                //     //                             validate: false,
                                                                //     //                             props: {
                                                                //     //                                 clearable: true
                                                                //     //                             }
                                                                //     //                         }
                                                                //     //                     }
                                                                //     //                 };
                                                                //     //             });
                                                                //     //         }
                                                                //     //     }
                                                                //     // }
                                                                // }
                                                            ]
                                                        }
                                                    ]
                                                }
                                            ]
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]);
    }
};
